<template>
	<view class="body" :class="{'no-scroll': isMask}">
		<!-- <view v-if="isMask" class="mask" @click="onMask"></view> -->
		<view class="bg">
			<image :src="$IMAGE_BASE_URL2 + '/yangcan/bg.png'" style="width: 100%; height:671rpx;margin: auto; display: block;"></image>
		</view>
		<view class="top">
			<u-navbar :border-bottom='false' title-color='#fff' back-icon-color='#fff' background="" title="氧舱详情"
				:is-fixed='false'></u-navbar>
		</view>
		<view class="latest-data">
			<view style="display: flex;">
				<view class="title">最新一次数据</view>
				<view class="data">025-05-23 12:00</view>
			</view>
			<view style="display: flex;flex-wrap: wrap">
		    <view class="vital-signs">
		       <view class="name"><image src="@/img/yangcan/xl.png"  style="width: 32rpx; height:26rpx;display: block;margin-right: 10rpx; margin-top: 6rpx;"></image>心率</view>
		       <view class="num">72<text class="unit">bpm</text></view>
		    </view>
			<view class="vital-signs">
			   <view class="name"><image src="@/img/yangcan/hx.png"  style="width: 33rpx; height:33rpx;display: block;margin-right: 10rpx;margin-top: 4rpx;"></image>呼吸</view>
			   <view class="num">15<text class="unit">次/分</text></view>
			</view>
		    <!-- 舱内数据 -->
		   <view class="vital-signs">
		      <view class="name"><image src="@/img/yangcan/cnyl.png"  style="width: 40rpx; height:40rpx;display: block;margin-right: 10rpx;margin-top: 0rpx;"></image>舱内压力</view>
		      <view class="num">15<text class="unit">kpa</text></view>
		   </view>
		   <view class="vital-signs">
		      <view class="name"><image src="@/img/yangcan/sj.png"  style="width: 38rpx; height:38rpx;display: block;margin-right: 10rpx;margin-top: 1rpx;"></image>时间</view>
		      <view class="num">15<text class="unit">分钟</text></view>
		   </view>
		    </view>
		    <!-- 健康状态 -->
		    <view class="health-status">
		      <view>
		        <text class="name">疲劳程度</text>
		        <text class="jieguo">不疲劳</text>
		      </view>
		      <view>
		        <text class="name">心率不齐</text>
		        <text class="jieguo">窦性心率</text>
		      </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {
		getCurrentPage
	} from '@/core/app'
	import StorageUtils from "@/utils/StorageUtils";
	import SimDevice from '../../service/mqtt/sim/SimDevice.js';
	import {
		DeviceBasicData
	} from '../../service/mqtt/DeviceConfig.js';
	export default {
		data() {
			return {
				deviceInfo: {}
			}
		},
		onReady() {
			this.deviceId = getCurrentPage().query.iotDeviceId;
			this.deviceName = decodeURIComponent(getCurrentPage().query.deviceName);
			this.mqtt('waiji001')
		},
		onHide() {
			if (this.mqttPing) {
				clearInterval(this.mqttPing);
				this.simDevice.close();
			}
		},
		methods: {
			mqtt(device) {
				let deviceBasicData = new DeviceBasicData('', '', undefined);
				this.simDevice = new SimDevice();
				let url = '47.97.72.174:1887';
				// let url = '123.60.177.231:1887';
				deviceBasicData.username = '1559108322@qq.com';
				deviceBasicData.password = '123456';
				deviceBasicData.addr = url;
				let that = this;
				this.simDevice.clientDataListener = {
					onHandle: (topic, msg) => {
						msg = msg.replace(/'/g, '"');
						if (JSON.parse(msg).method === 'thing.service.property.post') {
							let info = JSON.parse(msg);
							let item = info.params;
							let data = {}
							if (item == undefined) {
								return false;
							}
							this.deviceInfo = {
								...this.deviceInfo,
								...item,
								...data
							}
							console.log(that.deviceInfo);
						}
					},
					onSetProperty: (requestPayload) => {
						let params = requestPayload.params;
					},
					onConnect(success) {
						// console.log('连接服务器:' + success);
						if (success) {
							that.simDevice.subscribe('o86vNHeJpJW', device)
							that.mqttPing = setInterval(() => {
								that.simDevice.ping()
							}, 30000);
						}
					},
					onClose() {
						console.log('连接关闭');
					}
				};
				this.simDevice.init(deviceBasicData);
				this.simDevice.connectServer();
			},
		}
	}
</script>


<style lang="scss">
	.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}

	.body {
		padding: 0 28rpx 0;
		color: #040303;
		background-color: #feebd6;
		overflow: hidden;
	}

	.top {
		position: relative;
		z-index: 99;
	}

	.no-scroll {
		position: fixed;
		width: 100%;
		height: 100vh;
		/* 设置为视口高度 */
		overflow: hidden;
	}
.latest-data {
	  background-color: #fff;
	  color: #1d1a1a;
	  padding: 20rpx;
	  border-radius: 10rpx;
	  margin-bottom: 20rpx;
	  .title{
		  font-size: 36rpx;
		  font-weight: bold;
		  line-height: 70rpx;
	  }
	  .data{
		  font-size: 24rpx;
		  font-weight: bold;
		  line-height: 70rpx;
		  margin-left: auto;
	  }
	  .vital-signs{
		  background-color: #fff9f1;
		  width: 47%;
		  padding: 20rpx;
		  height: 160rpx;
		  margin:10rpx auto;
		  .name{
			  line-height: 40rpx;
			  font-size: 26rpx;
			  display: flex;
		  }
		  .num{
			  font-size: 66rpx;
			  text-align: center;
			  .unit{
				  font-size: 20rpx;
				  color: #78787b;
				}
		  }
	  }
	  .health-status{
		  height: 160rpx;
		  background: url('@/img/yangcan/plbg.png') no-repeat 100% 100%;
		  display: flex;
		  padding: 30rpx;
		  text-align: center;
		  font-weight: bold;
		  border-radius: 10rpx;
		  margin: 20rpx 0;
		  width: 98%;
		  view{
			  width: 50%;
		  }
		  .name{
			  font-size: 24rpx;
			  line-height: 32rpx;
			  display: block;
		  }
		  .jieguo{
			  font-size: 36rpx;
			  color: #ff781d;
			  line-height: 90rpx;
			  display: block;
		  }
	  }
	}
	
	// f5a94d  ff6e3b
</style>